<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主界面</title>
</head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>宜染在线</title>
    <link rel="stylesheet" href="../../re/element-ui/theme-chalk/index.css">
    <style type="text/css">

    /* */
          
        .el-header {
            background-color:#545c64;
            color: #fff;              
        }

        .el-footer{
            background-color:#545c64;
            color: #fff;
            line-height: 30px;
        }

        .el-aside {
            color: #333;
            overflow:auto;
        }

        .el-menu-item{

            width:150px;
        }

        #app{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
    </style>
</head>

<body>

    <div id="app">

        <el-container style="height: 100%;">

            <el-header style="position: relative;">
                <div style="position:absolute; left:7px;bottom:15px;font-size:26px;font-weight:bold;font-family: 楷体;color:#DDDDDD;">宜染在线信息系统</div>
                <div style="position:absolute; right:10px;bottom:20px;font-size:13px; ">
                    <el-dropdown>
                        <span style="color:#fff;" ><i class="el-icon-user" ></i> 某用户</span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item>退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    
                </div>
            </el-header>

            <el-container>

                <el-aside width="200px" style="position: relative;"  >
                    <el-menu style="position: absolute ;top:0;bottom:0;left:0;right:0;border:none; overflow: auto;">
                        <el-submenu v-for="main in mainMenuList" :index="main.menuId">
                            <template slot="title"><i class="el-icon-menu"></i>{{main.menuName}}</template>
                            <el-menu-item @click.native="linkTo(sub.menuUrl)" v-for="sub in main.subMenuList" :index="sub.menuId">{{sub.menuName}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main style="border-left:#e4ebf3 solid 1px;">
                  <iframe name="mainFrame" style="width:100%;height:100%;border:none;"></iframe>
                </el-main>               
           </el-container>

           <el-footer style="height:30px;text-align:center;font-size:13px;" >版权所有：&copy;XXX软件开发有限责任公司</el-footer> 
        </el-container>
    </div>


    <script src="../../re/js/vue.min.js"></script>
    <script src="../../re/js/axios.min.js"></script>
    <script src="../../re/element-ui/index.js"></script>
    <script src="../../re/js/my.js"></script>

    <script>

        let vm = new Vue({
            el: '#app',
            data: {
                mainMenuList:[]
            },
            methods: {
                linkTo(url){
                    window.mainFrame.location.href=`../..${url}`;
                }
            },
            mounted() {
                $axios.get("/safty/home/menu")
                    .then((response)=>{
                        this.mainMenuList=response.data;
                    })
                    .catch((error)=>{
                        console.log(error);
                    });
            } 
        });




    </script>




</body>


</html>